<!doctype html>
<html class="no-js" lang="zxx" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Daxone - eCommerce Bootstrap 4 Template</title>
    <meta name="robots" content="noindex, follow"/>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.png">

    <!-- CSS
	============================================ -->

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" th:href="@{/assets/css/vendor/bootstrap.min.css}">
    <!-- Icon Font CSS -->
    <link rel="stylesheet" th:href="@{/assets/css/vendor/line-awesome.css}">
    <link rel="stylesheet" th:href="@{/assets/css/vendor/themify.css}">
    <!-- othres CSS -->
    <link rel="stylesheet" th:href="@{/assets/css/plugins/animate.css}">
    <link rel="stylesheet" th:href="@{/assets/css/plugins/owl-carousel.css}">
    <link rel="stylesheet" th:href="@{/assets/css/plugins/slick.css}">
    <link rel="stylesheet" th:href="@{/assets/css/plugins/magnific-popup.css}">
    <link rel="stylesheet" th:href="@{/assets/css/plugins/jquery-ui.css}">
    <link rel="stylesheet" th:href="@{/assets/css/style.css}">
    <link rel="stylesheet" th:href="@{/assets/layui/css/layui.css}">
    <style type="text/css">
        .time-item strong {
            background: #C71C60;
            color: #fff;
            line-height: 49px;
            font-size: 36px;
            font-family: Arial;
            padding: 0 10px;
            margin-right: 10px;
            border-radius: 5px;
            box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
        }

        .day_show {
            float: left;
            line-height: 49px;
            color: #c71c60;
            font-size: 32px;
            margin: 0 10px;
            font-family: Arial, Helvetica, sans-serif;
        }

        .circusee-count {
            width: 50%;
            height: 80px;
            line-height: 80px;
            text-align: center;
            background: green;
            color: white;
            vertical-align: middle;
        }

        .auction-count {
            width: 50%;
            height: 80px;
            line-height: 80px;
            text-align: center;
            background: #C71C60;
            color: white;
            vertical-align: middle;
        }

        .formore {
            align-self: center;
            width: 100%;
            height: 30px;
            text-align: center;
            line-height: 30px;
            vertical-align: 30px;
            text-decoration: underline;
        }

        #searchbtn:hover{
            color:#999;
            transform: scale(2.0);
            cursor:pointer;
        }
    </style>
</head>

<body>
<!--服务名相关url：js，商品图片超链接和标题，查看更多，加入收藏（goodutil.js）-->
<div class="main-wrapper">
    <div th:include="headerfooter :: header"></div>
    <!-- 今日商品页面 -->
    <div class="shop-area pt-90 pb-90">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <!-- 筛选页 -->
                    <div class="shop-topbar-wrapper">
                        <div class="shop-topbar-left">
                            <div class="view-mode nav">
                                <a class="active" href="#shop-2" data-toggle="tab">今日拍卖</a>
                            </div>
                        </div>
                    </div>
                    <div class="shop-bottom-area">
                        <div class="tab-content jump">
                            <div id="shop-2" class="tab-pane active">
                                <div class="shop-list-wrap mb-30" th:each="good:${pageInfo.list}">
                                    <!-- 单个商品 -->
                                    <div class="row">
                                        <div class="col-xl-4 col-lg-5 col-md-6 col-sm-6">
                                            <div class="product-list-img">
                                                <a th:href="@{/good/goodDetail.html(gid=${good.gid})}">
                                                    <img th:src="@{(${good.url})}" alt="Product Style">
                                                </a>
                                                <div class="product-list-quickview">
                                                    <a title="Quick View" href="javascript:" th:onclick="|addCollection(${good.gid})|">
                                                        <i class="la la-heart-o"></i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-8 col-lg-7 col-md-6 col-sm-6">
                                            <div class="shop-list-content">
                                                <h4><a th:href="@{/good/goodDetail.html(gid=${good.gid})}">[[${good.title}]]</a></h4>
                                                <div class="pro-list-price">
                                                    <span>商品发布人：[[${good.publisher}]]</span><br/>
                                                    <span>起拍价：[[${good.startPrice}]]</span>
                                                </div>
                                                <!-- 倒计时 -->
                                                <div class="time-item my-5"
                                                     th:if="${good.goodState==2}">
                                                    <span style="display: none" class="durationTime"
                                                          th:text="${good.durationSeconds}"></span>
                                                    <!-- <span id="day_show">0天</span> -->
                                                    <strong class="hour_show">0时</strong>
                                                    <strong class="minute_show">0分</strong>
                                                    <strong class="second_show">0秒</strong>
                                                    <span>结束</span>
                                                </div>
                                                <div class="my-5" th:if="${good.goodState==3}">
                                                    <h4>[[${#dates.format(good.startTime,'HH:mm:ss')}]]开始拍卖</h4>
                                                </div>
                                                <div class="circusee-count" th:if="${good.goodState==3}">
                                                    <strong class="h5">[[${good.circuseeNo}]]</strong>人围观
                                                </div>
                                                <div class="auction-count"
                                                     th:if="${good.goodState==2||good.goodState==2}">
                                                    <strong class="h5">[[${good.bidNo}]]</strong>人出价
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="pagination-style text-center">
                                <div id="pagination"></div>
                            </div>
                            <div class="formore mt-3">
                                <h4><a th:href="@{/good/goodlist(goodType=${goodType})}">查看更多</a></h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div th:include="headerfooter :: footer"></div>
</div>
<!-- JS
============================================ -->

<!-- Modernizer JS -->
<script th:src="@{/assets/js/vendor/modernizr-3.6.0.min.js}"></script>
<!-- Modernizer JS -->
<script th:src="@{/assets/js/vendor/jquery-3.3.1.min.js}"></script>
<!-- Popper JS -->
<script th:src="@{/assets/js/vendor/popper.js}"></script>
<!-- Bootstrap JS -->
<script th:src="@{/assets/js/vendor/bootstrap.min.js}"></script>

<!-- Slick Slider JS -->
<script th:src="@{/assets/js/plugins/countdown.js}"></script>
<script th:src="@{/assets/js/plugins/counterup.js}"></script>
<script th:src="@{/assets/js/plugins/images-loaded.js}"></script>
<script th:src="@{/assets/js/plugins/isotope.js}"></script>
<script th:src="@{/assets/js/plugins/instafeed.js}"></script>
<script th:src="@{/assets/js/plugins/jquery-ui.js}"></script>
<script th:src="@{/assets/js/plugins/jquery-ui-touch-punch.js}"></script>
<script th:src="@{/assets/js/plugins/magnific-popup.js}"></script>
<script th:src="@{/assets/js/plugins/owl-carousel.js}"></script>
<script th:src="@{/assets/js/plugins/scrollup.js}"></script>
<script th:src="@{/assets/js/plugins/waypoints.js}"></script>
<script th:src="@{/assets/js/plugins/slick.js}"></script>
<script th:src="@{/assets/js/plugins/wow.js}"></script>
<script th:src="@{/assets/js/plugins/textillate.js}"></script>
<script th:src="@{/assets/js/plugins/elevatezoom.js}"></script>
<script th:src="@{/assets/js/plugins/sticky-sidebar.js}"></script>
<script th:src="@{/assets/js/plugins/smoothscroll.js}"></script>
<script th:src="@{/assets/layui/layui.js}"></script>
<!-- Main JS -->
<script th:src="@{/assets/js/main.js}"></script>
<script th:src="@{/assets/js/goodutil.js}"></script>
<script type="text/javascript" th:inline="javascript">

    function timer() {
        var intDiffs = $(".durationTime");//倒计时总秒数量
        intDiffs.each(function () {
            var intDiff = $(this).html();
            var $timeUnit = $(this).siblings();
            window.setInterval(function () {
                var day = 0,
                    hour = 0,
                    minute = 0,
                    second = 0;//时间默认值
                if (intDiff > 0) {
                    day = Math.floor(intDiff / (60 * 60 * 24));
                    hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
                    minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
                    second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
                }
                if (minute <= 9) minute = '0' + minute;
                if (second <= 9) second = '0' + second;
                $timeUnit.filter('.day_show').html(day + "天");
                $timeUnit.filter('.hour_show').html('<s id="h"></s>' + hour + '时');
                $timeUnit.filter('.minute_show').html('<s></s>' + minute + '分');
                $timeUnit.filter('.second_show').html('<s></s>' + second + '秒');
                intDiff--;
            }, 1000);
        });
    }

    function getPage(pageNum) {
        window.location.href = "/good/today?goodType="+[[${goodType}]]
            + "&currentPage=" + pageNum;
    }

    $(function () {
        timer();
        pagination([[${pageInfo.total}]], [[${pageInfo.pageNum}]], [[${pageInfo.pageSize}]]);
    });

    function searchgood(){
        var searchContext = $("#searchinput").val();
        window.location.href = "/good/goodlist?searchContext="+searchContext;
    }
</script>
</body>

</html>